<template>
  <!-- 提交的提醒 start -->
  <XnDialog
    custom-class="board1_dialog"
    :title="menuPermission === 'unit' ? '备注' : '等次调整'"
    :visible.sync="selfVisible"
    @close="onClose"
    width="720px">
    <div class="good_con" v-if="menuPermission === 'org'">
      <span
        class="back_good"
        :class="{ active: activeId == item.value }"
        v-for="item in dataList"
        :key="item.value"
        @click="setEqual(item, activeRow)">
        {{ item.label }}
      </span>
    </div>
    <div class="reason" v-if="menuPermission === 'org'">
      <el-input
        type="textarea"
        :placeholder="
          menuPermission === 'unit'
            ? '此人的季度考核得分不在前40%排名内，请说明评定为“好”的原因'
            : '请输入考核等次结果调整原因'
        "
        :rows="5"
        v-model="remark"
        maxlength="40"></el-input>
    </div>
    <div class="annex" v-if="menuPermission === 'unit'">
      <!-- <div class="title_main_one">添加附件</div> -->
      <div class="board_list_file">
        <UploadFile :file-list="albumList" uploadTitle="证明材料：" />
      </div>
    </div>
    <div class="sunmit_tips">
      <el-button @click="onClose" size="small">取消</el-button>
      <el-button type="primary" @click="sureReason" size="small">确定</el-button>
    </div>
  </XnDialog>

  <!-- 收藏成功提醒 end -->
</template>

<script>
import XnDialog from '@com/xnDialog.vue'
import UploadFile from '@com/UploadFile'
export default {
  components: { UploadFile, XnDialog },
  props: {
    resultShow: {
      type: Boolean,
      default: false,
    },
    menuPermission: {
      type: String,
      default: '',
    },
    activeRow: {
      type: Object,
      default: () => {},
    },
    resultList: {
      type: Array,
      default: () => [],
    },
    goodNum: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {
      remark: '',
      activeId: '',
      dataList: [],
      albumList: [],
      selfVisible: false,
    }
  },
  watch: {
    activeRow: {
      handler(news) {
        this.activeId = news.assessRank || news.orgAssessRank
        if (this.menuPermission === 'unit') {
          this.remark = news.adminRemark
          this.albumList = news.adminFileShowVOList || []
        }
      },
    },
    resultList(list) {
      if (list.length) {
        this.dataList = list.filter(item => item.label !== '全部' && item.value && item.value !== '6')
      }
    },
    resultShow(visible) {
      this.selfVisible = visible
    },
  },
  created() {},
  mounted() {
    this.activeId = this.activeRow && (this.activeRow.assessRank || this.activeRow.orgAssessRank)
    if (this.menuPermission === 'unit') {
      this.remark = this.activeRow && this.activeRow.adminRemark
      this.albumList = (this.activeRow && this.activeRow.adminFileShowVOList) || []
    }
  },
  methods: {
    onClose() {
      this.remark = ''
      this.selfVisible = false
      this.$emit('close')
      this.$emit('update:visible', false)
    },
    sureReason() {
      const assessRank = this.activeRow.assessRank || this.activeRow.orgAssessRank
      if (this.menuPermission === 'org' && this.activeId === assessRank) {
        this.$message.warning('你选择的考核等次与单位考核等次一致，无需调整')
        return
      }
      if (!this.remark.trim() && this.menuPermission === 'org') {
        const message = this.menuPermission === 'org' ? '请输入考核等次结果调整原因' : '请说明评定为“好”的原因'
        this.$message.warning(message)
        return
      }
      if (this.albumList.length === 0 && this.menuPermission === 'unit') {
        this.$message.warning('请上传相关附件')
        return
      }
      this.$emit('sureReason', this.remark, this.activeId, this.albumList)
      this.remark = ''
      this.albumList = []
    },
    setEqual(item, row) {
      if (item.value === '1' && this.goodNum <= 0) {
        this.$message.warning('根据评分规则，设置等次为好的人数已满')
        return
      }
      this.activeId = item.value
    },
  },
}
</script>

<style lang="scss" scoped>
.board1_dialog {
  display: flex;
  align-items: center;
  font-size: 20px;
  padding-left: 20px;
  color: #333;
  /deep/ .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
  /deep/ .el-dialog__headerbtn {
    top: 17px;
  }

  /deep/ .el-dialog__header {
    background: #004db6;
    padding: 13px 10px 10px 10px;
  }
  /deep/ .el-dialog__title {
    line-height: 6px;
    font-size: 20px;
    color: #fff;
    padding-left: 5px;
  }
  /deep/ .el-dialog__body {
    padding: 20px 20px 10px;
    font-size: 16px;
    line-height: 30px;
    /deep/.el-checkbox__label {
      font-size: 14px;
    }
  }
  .bot_tips {
    border-top: 1px solid #ececec;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
  }
  .bot_tips_btn {
    cursor: pointer;
    color: #1852a3;
    font-size: 16px;
  }
  .color_warning_dia {
    color: #e6a23c;
    font-size: 18px;
  }
  .color-font {
    font-size: 18px;
  }
  .sunmit_tips {
    margin-top: 15px;
    text-align: right;
    /deep/ .el-button--mini,
    .el-button--small {
      font-size: 16px;
    }
  }
}
.good_con {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 15px;
}
.back_good {
  display: inline-block;
  cursor: pointer;
  margin-right: 8px;
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  min-width: 60px;
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
}
.active {
  color: #fff;
  background-color: #e0c699;
  border-color: #e0c699;
}
.annex {
  margin-top: 10px;
}
</style>
